<template>
  <div class="myCollect">
    <!-- 我的收藏 导航栏 -->
<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo CollectBar"
  mode="horizontal"
  @select="handleSelect"
  text-color="#001"
  active-text-color="rgb(191, 178, 210)">
  <el-menu-item index="1">我收藏的专辑</el-menu-item>
  <el-menu-item index="2">我收藏的歌手</el-menu-item>
</el-menu>
    <!-- 我的收藏展示列表 -->
    <component v-bind:is="currentTabComponent"></component>
  </div>
</template>

<script>
import songList from '../../components/songList.vue'
import album from "./child/album.vue"
export default {
  components:{
    songList,
    album,
  },
  data() {   
      return {
        activeIndex: '1',
        activeIndex2: '1',
        currentTabComponent: "album",
        opList: ['album', 'songList']
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        this.$data.currentTabComponent = this.$data.opList[key-1]
      }
    },
    created(){
      this.$store.commit("getCollect")
    }
}
</script>

<style scpoed>
.CollectBar{
  margin: 0 0 2rem 0;
}
.goTop{
    height: 100vh;
    overflow-x: hidden;
  }
</style>